<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="700px" append-to-body custom-class="import-dialog">
      <div class="container">
        <div class="info">
          <div class="info-item">
            <label>单号：</label><span>{{ sweep.houseSweepId }}</span>
          </div>
          <div class="info-item">
            <label>房间：</label><span>{{ sweep.fullAddress }}</span>
          </div>
          <div class="info-item">
            <label>分类：</label><span><dict-tag style="display: inline" :options="dict.type.sweep_type" :value="sweep.sweepType" /></span>
          </div>
          <div class="info-item">
            <label>状态：</label><span><dict-tag style="display: inline" :options="dict.type.dict_sweep_state" :value="sweep.sweepState" /></span>
          </div>
          <div class="info-item">
            <label>关联订单：</label><span>{{ sweep.orderId }}</span>
          </div>
          <div class="info-item">
            <label>预计开始时间：</label><span>{{ sweep.scheduledTime }}</span>
          </div>
          <div class="info-item">
            <label>打扫人：</label><span>{{ sweep.homeSweepName }}</span>
          </div>
          <div class="info-item">
            <label>完成时间：</label><span>{{ sweep.finishTime }}</span>
          </div>
        </div>
        <div class="table">
          <el-table v-loading="loading" :data="facilitiesList" @selection-change="handleSelectionChange"
            :header-cell-style="{
              background: '#E7E7E7',
              color: '#333',
              fontWeight: 'bold'
            }" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <!-- <el-table-column type="selection" width="50" align="center" /> -->
            <el-table-column label="位置" align="center" key="cleaningProcessName" prop="cleaningProcessName" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                  <span v-if="!scope.row.parentId">{{ scope.row.cleaningProcessName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="图片" align="center" prop="facilitiesImg">
              <template slot-scope="scope">
                <div class="imageBox">
                  <el-image fit="contain" style=";width: auto; height: 50px;padding: 5px;" :src="item"
                    :preview-src-list="imageList(scope.row.facilitiesImg)" v-for="(item, index) in imageList(scope.row.facilitiesImg)"
                    :key="index">
                  </el-image>
                </div>

              </template>
            </el-table-column>
          </el-table>
          <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
        </div>
      </div>
      <!-- <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { debounce } from "@/utils";
import { getSweep } from "@/api/houseCleaning/sweep";
export default {
  dicts: ['dict_sweep_state', 'sweep_type'],
  components: {
  },
  props: {
    title: {
      default: "详情",
    },
    value: {
      default: false,
    },
    data: {
      default: undefined,
    },
  },
  data() {
    return {
      visible: false,
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      sweep:{},
      //设施列表
      facilitiesList: []
    };
  },
  computed: {
    imageList() {
      return (value) => {
        if (value) {
          return value.split(",")
        }
        return []
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init();
      }
      this.visible = newVal; // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit("input", val); // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
  },
  methods: {
    init() {
      this.reset()
      // this.getList()
      this.getSweep()
    },
    reset() {
      this.form = {
      }
      this.resetForm("form");
    },
    // 获取列表
    getList() {
      this.facilitiesList = [],
      this.total = 2
    },
    getSweep(){
      getSweep(this.data.houseSweepId).then(res=>{
        this.sweep = res.data

        this.facilitiesList = res.data.sweepProcessRecordList
      })
    },
    handleSelectionChange() { },
    submitForm: debounce(function () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // if (this.form.userId) {
          //   updateUserBusiness(this.form).then(response => {
          //     if (response.code == 200) {
          //       this.$emit("success");
          //       this.$message.success(response.msg);
          //       this.visible = false;
          //     } else {
          //       this.$message.error(response.msg);
          //     }
          //   })
          // } else {
          //   addUserBusiness(this.form).then(response => {
          //     if (response.code == 200) {
          //       this.$emit("success");
          //       this.$message.success(response.msg);
          //       this.visible = false;
          //     } else {
          //       this.$message.error(response.msg);
          //     }
          //   })
          // }
        }
      })
    }, 500),
    cancel() {
      this.reset();
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog.scss";

.container {
  .info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    margin-bottom: 20px;
  }

  .table {
    .imageBox {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
